<template>
  <div class="box fx_1" :class="mode=='vertical'?'fx_col':'fx'">
    <template v-for="(item, index) in subMenuList">
      <template v-if="!item.hidden">
        <el-submenu
          v-if="item.children && item.children.length>1"
          :key="index + 'el-submenu'"
          :index="item.path"
        >
          <template slot="title">
            <!-- <i :class="item.meta.icon " /> -->
            <span>{{ item.meta.title }}</span>
          </template>
          <SubMenu :sub-menu-list="item.children" />
        </el-submenu>
        <template v-else>
          <el-menu-item :key="index+item.path" :index="item.path">
            <template slot="title">
              <!-- <i :class="item.meta ? item.meta.icon : item.children[0].meta.icon" /> -->
              <span>{{ item.meta ? item.meta.title : item.children[0].meta.title }}</span>
            </template>
          </el-menu-item>
        </template>
      </template>
    </template>
  </div>
</template>
<script>
import SubMenu from './subMenu'

export default {
  name: 'SubMenu', // 必须要 递归组件的关键，并且要与引入组件的变量名称一致
  components: {
    SubMenu
  },
  props: {
    subMenuList: {
      // 接收到的菜单信息
      type: Array,
      default: () => ([])
    },
    authority: {
      // 填报权限 0 1不展示
      type: Number,
      default: 0
    },
    mode: {
      // 菜单 水平  垂直
      type: String,
      default: 'vertical'
    }
  },
  // 生命周期 - 创建完成
  created() {
  },
  // DOM挂载完毕
  mounted() {},
  methods: {}
}
</script>
<style >
.fx_col{
  display: flex;
  flex-direction: column;
}
.fx{
  display: flex;
}
</style>
